<<<<<<< HEAD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带动画效果的JS拖拽特效代码</title>
<script src="js/jq.js"></script>
<script>
	/*
		作者: 谢泽龙
		时间: 2014-9-24
		www.js-css.cn
	*/
	$(function() {
		function Pointer(x, y) {
			this.x = x ;
			this.y = y ;
		}
		function Position(left, top) {
			this.left = left ;
			this.top = top ;
		}
		$(".item_content .item").each(function(i) {
			this.init = function() { // 初始化
				this.box = $(this).parent() ;//指向对应的li
				$(this).attr("index", i).css({//设置每一个列表的定位
					position : "absolute",
					left : this.box.offset().left,//根据对应的父级相对于文档左边的偏移
					top : this.box.offset().top//根据对应的父级相对于文档上边的偏移
				}).appendTo(".item_content") ;//追加到父级
				this.drag() ;//调用拖拽方法
			},
			this.move = function(callback) {  // 移动
				$(this).stop(true).animate({
					left : this.box.offset().left,//根据对应的父级相对于文档左边的偏移
					top : this.box.offset().top//根据对应的父级相对于文档上边的偏移
				}, 500, function() {
					if(callback) {
						//call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
						callback.call(this) ;//更改当前移动列表的css样式（index以及透明度）
					}
				}) ;
			},
			this.collisionCheck = function() {//检查碰撞
				var currentItem = this ;//当前列表
				var direction = null ;//方向
				$(this).siblings(".item").each(function() {//循环当前移动列表的兄弟列表
					console.log(
						'pointer.x:   '+currentItem.pointer.x+
						'   box.x:   '+this.box.offset().left+
						'   pointer.y:  '+this.box.offset().top+
						'   box.x+box.w:   '+this.box.offset().left + this.box.width()+
						'   box.y+box.h:   '+this.box.offset().top + this.box.height()
						)
					if(
						currentItem.pointer.x > this.box.offset().left &&
						currentItem.pointer.y > this.box.offset().top &&
						(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
						(currentItem.pointer.y < this.box.offset().top + this.box.height())
					) {
						// 返回对象和方向
						if(currentItem.box.offset().top < this.box.offset().top) {
							direction = "down" ;
						} else if(currentItem.box.offset().top > this.box.offset().top) {
							direction = "up" ;
						} else {
							direction = "normal" ;
						}
						this.swap(currentItem, direction) ;
					}
				}) ;
			},
			this.swap = function(currentItem, direction) { // 交换位置（点击列表，方向）
				var directions = {
					normal : function() {//水平运动
						var saveBox = this.box ;//当前移动到的li
						this.box = currentItem.box ;//点击的列表的li
						currentItem.box = saveBox ;//当前移动到的li
						this.move() ;
						$(this).attr("index", this.box.index()) ;
						$(currentItem).attr("index", currentItem.box.index()) ;
					},
					down : function() {
						// 移到上方
						var box = this.box ;
						var node = this ;
						var startIndex = currentItem.box.index() ;
						var endIndex = node.box.index(); ;
						for(var i = endIndex; i > startIndex ; i--) {
							var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ;
							node.box = prevNode.box ;
							$(node).attr("index", node.box.index()) ;
							node.move() ;
							node = prevNode ;
						}
						currentItem.box = box ;
						$(currentItem).attr("index", box.index()) ;
					},
					up : function() {
						// 移到上方
						var box = this.box ;
						var node = this ;
						var startIndex = node.box.index() ;
						var endIndex = currentItem.box.index(); ;
						for(var i = startIndex; i < endIndex; i++) {
							var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ;
							node.box = nextNode.box ;
							$(node).attr("index", node.box.index()) ;
							node.move() ;
							node = nextNode ;
						}
						currentItem.box = box ;
						$(currentItem).attr("index", box.index()) ;
					}
				}
				directions[direction].call(this) ;
			},
			this.drag = function() { // 拖拽
				var oldPosition = new Position() ;
				var oldPointer = new Pointer() ;
				var isDrag = false ;
				var currentItem = null ;
				$(this).mousedown(function(e) {
					e.preventDefault() ;
					oldPosition.left = $(this).position().left ;
					oldPosition.top =  $(this).position().top ;
					oldPointer.x = e.clientX ;//鼠标点击位置距离浏览器左边的宽度
					oldPointer.y = e.clientY ;//鼠标点击位置距离浏览器上边的宽度
					isDrag = true ;
					currentItem = this ;
				}) ;
				$(document).mousemove(function(e) {
					var currentPointer = new Pointer(e.clientX, e.clientY) ;
					if(!isDrag) return false ;
					$(currentItem).css({
						"opacity" : "0.8",
						"z-index" : 999
					}) ;
					var left = currentPointer.x - oldPointer.x + oldPosition.left ;
					var top = currentPointer.y - oldPointer.y + oldPosition.top ;
					$(currentItem).css({
						left : left,
						top : top
					}) ;
					currentItem.pointer = currentPointer ;
					// 开始交换位置
					currentItem.collisionCheck() ;
				}) ;
				$(document).mouseup(function() {
					if(!isDrag) return false ;
					isDrag = false ;
					currentItem.move(function() {
						$(this).css({
							"opacity" : "1",
							"z-index" : 0
						}) ;
					}) ;
				}) ;
			}
			this.init() ;
		}) ;
	}) ;
</script>
<style>
	.item_content {
		width:740px;
		height:460px;
		border:1px solid #ccc;
		margin: 50px auto;
	}
	.item_content ul  {
		list-style:none;
		overflow: hidden;
	}
	.item_content ul li {
		width:200px;
		height:120px;
		float:left;
		margin:10px
	}
	.item_content .item {
		width:200px;
		height:120px;
		line-height:120px;
		text-align:center;
		cursor:pointer;
		background:#ccc;
		border-radius:6px;
		overflow: hidden;
	}
	.item_content .item img {
		width:100%;
		height:100%;
	}
</style>
</head>

<body>

	<div class="item_container">
		<div class="item_content">
			<ul>
				<li>
					<div class="item">
						<img src="images/youku.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/jd.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/taobao.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/fenghuan.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/souhu.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/wangyi.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/renren.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/360.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/360game.png" />
					</div>
				</li>
			</ul>
		</div>
	</div>

</body>
=======
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带动画效果的JS拖拽特效代码</title>
<script src="js/jq.js"></script>
<script>
	/*
		作者: 谢泽龙
		时间: 2014-9-24
		www.js-css.cn
	*/
	$(function() {
		function Pointer(x, y) {
			this.x = x ;
			this.y = y ;
		}
		function Position(left, top) {
			this.left = left ;
			this.top = top ;
		}
		$(".item_content .item").each(function(i) {
			this.init = function() { // 初始化
				this.box = $(this).parent() ;//指向对应的li
				$(this).attr("index", i).css({//设置每一个列表的定位
					position : "absolute",
					left : this.box.offset().left,//根据对应的父级相对于文档左边的偏移
					top : this.box.offset().top//根据对应的父级相对于文档上边的偏移
				}).appendTo(".item_content") ;//追加到父级
				this.drag() ;//调用拖拽方法
			},
			this.move = function(callback) {  // 移动
				$(this).stop(true).animate({
					left : this.box.offset().left,//根据对应的父级相对于文档左边的偏移
					top : this.box.offset().top//根据对应的父级相对于文档上边的偏移
				}, 500, function() {
					if(callback) {
						//call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
						callback.call(this) ;//更改当前移动列表的css样式（index以及透明度）
					}
				}) ;
			},
			this.collisionCheck = function() {//检查碰撞
				var currentItem = this ;//当前列表
				var direction = null ;//方向
				$(this).siblings(".item").each(function() {//循环当前移动列表的兄弟列表
					console.log(
						'pointer.x:   '+currentItem.pointer.x+
						'   box.x:   '+this.box.offset().left+
						'   pointer.y:  '+this.box.offset().top+
						'   box.x+box.w:   '+this.box.offset().left + this.box.width()+
						'   box.y+box.h:   '+this.box.offset().top + this.box.height()
						)
					if(
						currentItem.pointer.x > this.box.offset().left &&
						currentItem.pointer.y > this.box.offset().top &&
						(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
						(currentItem.pointer.y < this.box.offset().top + this.box.height())
					) {
						// 返回对象和方向
						if(currentItem.box.offset().top < this.box.offset().top) {
							direction = "down" ;
						} else if(currentItem.box.offset().top > this.box.offset().top) {
							direction = "up" ;
						} else {
							direction = "normal" ;
						}
						this.swap(currentItem, direction) ;
					}
				}) ;
			},
			this.swap = function(currentItem, direction) { // 交换位置（点击列表，方向）
				if(this.moveing) return false ;
				var directions = {
					normal : function() {
						var saveBox = this.box ;
						this.box = currentItem.box ;
						currentItem.box = saveBox ;
						this.move() ;
						$(this).attr("index", this.box.index()) ;
						$(currentItem).attr("index", currentItem.box.index()) ;
					},
					down : function() {
						// 移到上方
						var box = this.box ;
						var node = this ;
						var startIndex = currentItem.box.index() ;
						var endIndex = node.box.index(); ;
						for(var i = endIndex; i > startIndex ; i--) {
							var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ;
							node.box = prevNode.box ;
							$(node).attr("index", node.box.index()) ;
							node.move() ;
							node = prevNode ;
						}
						currentItem.box = box ;
						$(currentItem).attr("index", box.index()) ;
					},
					up : function() {
						// 移到上方
						var box = this.box ;
						var node = this ;
						var startIndex = node.box.index() ;
						var endIndex = currentItem.box.index(); ;
						for(var i = startIndex; i < endIndex; i++) {
							var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ;
							node.box = nextNode.box ;
							$(node).attr("index", node.box.index()) ;
							node.move() ;
							node = nextNode ;
						}
						currentItem.box = box ;
						$(currentItem).attr("index", box.index()) ;
					}
				}
				directions[direction].call(this) ;
			},
			this.drag = function() { // 拖拽
				var oldPosition = new Position() ;
				var oldPointer = new Pointer() ;
				var isDrag = false ;
				var currentItem = null ;
				$(this).mousedown(function(e) {
					e.preventDefault() ;
					oldPosition.left = $(this).position().left ;
					oldPosition.top =  $(this).position().top ;
					oldPointer.x = e.clientX ;//鼠标点击位置距离浏览器左边的宽度
					oldPointer.y = e.clientY ;//鼠标点击位置距离浏览器上边的宽度
					isDrag = true ;
					currentItem = this ;
				}) ;
				$(document).mousemove(function(e) {
					var currentPointer = new Pointer(e.clientX, e.clientY) ;
					if(!isDrag) return false ;
					$(currentItem).css({
						"opacity" : "0.8",
						"z-index" : 999
					}) ;
					var left = currentPointer.x - oldPointer.x + oldPosition.left ;
					var top = currentPointer.y - oldPointer.y + oldPosition.top ;
					$(currentItem).css({
						left : left,
						top : top
					}) ;
					currentItem.pointer = currentPointer ;
					// 开始交换位置
					currentItem.collisionCheck() ;
				}) ;
				$(document).mouseup(function() {
					if(!isDrag) return false ;
					isDrag = false ;
					currentItem.move(function() {
						$(this).css({
							"opacity" : "1",
							"z-index" : 0
						}) ;
					}) ;
				}) ;
			}
			this.init() ;
		}) ;
	}) ;
</script>
<style>
	.item_content {
		width:740px;
		height:460px;
		border:1px solid #ccc;
		margin: 50px auto;
	}
	.item_content ul  {
		list-style:none;
		overflow: hidden;
	}
	.item_content ul li {
		width:200px;
		height:120px;
		float:left;
		margin:10px
	}
	.item_content .item {
		width:200px;
		height:120px;
		line-height:120px;
		text-align:center;
		cursor:pointer;
		background:#ccc;
		border-radius:6px;
		overflow: hidden;
	}
	.item_content .item img {
		width:100%;
		height:100%;
	}
</style>
</head>

<body>

	<div class="item_container">
		<div class="item_content">
			<ul>
				<li>
					<div class="item">
						<img src="images/youku.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/jd.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/taobao.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/fenghuan.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/souhu.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/wangyi.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/renren.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/360.png" />
					</div>
				</li>
				<li>
					<div class="item">
						<img src="images/360game.png" />
					</div>
				</li>
			</ul>
		</div>
	</div>

</body>
>>>>>>> 74cfef3d64ae8b4235b758e0d27b3f6069c1465b
</html>